import React, { HtmlHTMLAttributes, useEffect, useRef, useState } from 'react';
import { View, Text, StyleSheet, Animated, Dimensions, FlatList, SafeAreaView, StatusBar, TouchableOpacity } from 'react-native';
import AntDesign from 'react-native-vector-icons/AntDesign';

interface IInfoCardProps<T> {
  cardTitle: string;
  cardIcon?: {
    iconName: string;
    color: string;
    size: number;
  };
  children?: React.ReactNode;
  cardChange?: (state: string | number) => void;
}

const InfoCard = <T extends unknown>({ cardTitle, children, cardIcon, cardChange }: IInfoCardProps<T>) => {
  const cardIconClick = () => {
    if (cardIcon?.iconName && cardChange) {
      cardChange(cardIcon.iconName);
    }
  };

  return (
    <View style={styles.cardView}>
      <View style={styles.title}>
        <View style={{flex:1}}>
          <Text style={styles.titleText}>{cardTitle}</Text>
        </View>
        <View style={{flex:1,alignItems:'flex-end'}}>
            {cardIcon?.iconName && ( <AntDesign name={cardIcon.iconName} size={cardIcon.size} color={cardIcon.color} onPress={cardIconClick}></AntDesign> )}
        </View>
      </View>
      <View style={styles.line}></View>
      <View style={styles.content}>{children}</View>
    </View>
  );
};

const styles = StyleSheet.create({
  cardView: {
    backgroundColor: '#fff',
    borderRadius: 8,
    width: '100%',
    minHeight: 60,
    paddingHorizontal:10,
    marginBottom:20
  },
  title: {
    width:'100%',
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems:'center',
    paddingVertical: 10,
    paddingHorizontal:4,
  },
  line:{
    borderBottomWidth:1,
    borderColor:'#ddd',
  },
  titleText:{
    color:'#000',
    fontSize:16
  },
  content: {},
});

export default InfoCard;
